<template>
    <div class="app-container">
        <transition>
            <router-view></router-view>
        </transition>
        <!---->
        <nav class="mui-bar mui-bar-tab towww" style="display:none">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/home">
                        <img :src="imghome" alt="">
                        <div class="mui-media-body">首页</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/GameCenter">
                        <img :src="imghomeGame" alt="">
                        <div class="mui-media-body">游戏中心</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/Okami">
                        <img :src="imghomeOkami" alt="">
                        <div class="mui-media-body">大神</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/Record">
                        <img :src="imghomeRecordRecord" alt="">
                        <div class="mui-media-body">开奖记录</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/My">
                        <img :src="imghomeRecordMy" alt="">
                        <div class="mui-media-body">我的</div>
                    </router-link>
                </li>
            </ul>
        </nav>
    </div>

</template>
<script>
export default {
    data() {
        return {
            imghome: "",
            imghomeGame: "",
            imghomeOkami: "",
            imghomeRecordMy: "",
            imghomeRecordRecord: ""
        };
    },
    created() {
        this.Highlight();
    },
    mounted() {
        this.bot();
    },
    methods: {
        bot: function() {
            var newval = this.$route.path;
            if (
                newval == "/home" ||
                newval == "/GameCenter"||
                newval == "/Record" ||
                newval == "/My"||
                newval == "/Okami"
            ) {
                document.querySelector(".towww").style.display = "block";
            }
            if (newval == "/GameCenter/Chkajiang") {
              
                document.querySelector(".app-container").style.padding = "0";
            } else {
                document.querySelector(".app-container").style = "";
            }
        },
        Highlight: function() {
            //启动高亮
            var newval = this.$route.path;
            if (newval == "/home") {
                this.imghome = require("./img/HomeContainer/首页选中.png");
            } else {
                this.imghome = require("./img/HomeContainer/首页未选中.png");
            }
            if (newval == "/GameCenter") {
                this.imghomeGame = require("./img/HomeContainer/游戏中心选中.png");
            } else {
                this.imghomeGame = require("./img/HomeContainer/游戏中心未选中.png");
            }
            if (newval == "/Record") {
                this.imghomeRecordRecord = require("./img/HomeContainer/开奖记录选中.png");
            } else {
                this.imghomeRecordRecord = require("./img/HomeContainer/开奖记录未选中.png");
            }
            if (newval == "/My") {
                this.imghomeRecordMy = require("./img/HomeContainer/我的选中.png");
            } else {
                this.imghomeRecordMy = require("./img/HomeContainer/我的未选中.png");
            }
            if (newval == "/Okami") {
                this.imghomeOkami = require("./img/HomeContainer/大神选中.png");
                console.log(newval);
            } else {
                this.imghomeOkami = require("./img/HomeContainer/大神未选中.png");
            }
        }
    },
    watch: {
        //////////////图片点击高亮效果
        "$route.path": function(newval) {
            if (
                newval == "/home" ||
                newval == "/GameCenter" ||
                newval == "/Record" ||
                newval == "/My" ||
                newval == "/Okami"
            ) {
                console.log(1)
                document.querySelector(".towww").style.display = "block";
                console.log(document.querySelector(".towww"))
            } else {
                document.querySelector(".towww").style.display = "none";
            }

            if (newval == "/home") {
                this.imghome = require("./img/HomeContainer/首页选中.png");
            } else {
                this.imghome = require("./img/HomeContainer/首页未选中.png");
            }
            if (newval == "/GameCenter") {
                this.imghomeGame = require("./img/HomeContainer/游戏中心选中.png");
            } else {
                this.imghomeGame = require("./img/HomeContainer/游戏中心未选中.png");
            }
            if (newval == "/Record") {
                this.imghomeRecordRecord = require("./img/HomeContainer/开奖记录选中.png");
            } else {
                this.imghomeRecordRecord = require("./img/HomeContainer/开奖记录未选中.png");
            }
            if (newval == "/My") {
                this.imghomeRecordMy = require("./img/HomeContainer/我的选中.png");
            } else {
                this.imghomeRecordMy = require("./img/HomeContainer/我的未选中.png");
            }
            if (newval == "/Okami") {
                this.imghomeOkami = require("./img/HomeContainer/大神选中.png");
                console.log(newval);
            } else {
                this.imghomeOkami = require("./img/HomeContainer/大神未选中.png");
            }
        }
    }
};
</script>
<style lang='scss' >
.app-container {
 
    // min-width: 300px; /**小屏幕设备**/
    // max-width: 750px; /**一般图片设计图在640**/
    margin: 0 auto;
    height: 100%;
    .v-enter {
        opacity: 0;
        transform: translateX(100%);
    }

    .v-leave-to {
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s ease;
    }
    .header {
        height: 45px;
        line-height: 45px;
        box-sizing: border-box;
        background: #ffffff;
        border-top: 3px solid #8c2c2c;
        a {
            box-sizing: border-box;
            color: #fff;
            background-color: #8c2c2c;
            border-color: #7f1d1d;
            display: inline-block;
            height: 34px;
            width: 54px;
            line-height: 34px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    }
    .foot {
        background-color: #d51313;
        line-height: 50px;
        text-align: center;
        color: #fff;
    }
    .towww {
        height: 1.2rem;
    }
    .mui-bar {
        .mui-table-view {
            .mui-table-view-cell {
                .mui-media-body {
                    font-size: 0.18rem;
                }
                width: 20%;
                padding: 0px;
                a {
                    padding: 0px;
                    img {
                        padding-top: 0.05rem;
                        width: 0.5rem;
                        height: 0.5rem;
                    }
                }
            }
        }
    }
}
</style>
